<template>
	<div>
		<!-- <div class="lq-box">
			<div class="lq-box_1 ">
				<a href="javascript:history.go(-1)"><img src="static/img/headBack.jpg"></a>
				<span>酒仙网8周年庆主会场</span>
				<a href="#"><img src="static/img/line.jpg"></a>
			</div>
		
		</div> -->
		<my-header :mmm='msg'></my-header>
	<div style="margin-top:1rem">
		<my-adbanner></my-adbanner>
		
		
		 <div class="lq-box_4" >
			<div class="edg">
				<i>距离活动结束还剩</i>
				<span><strong>07</strong></span>
				<i>天</i>
				<span><strong>15</strong></span>
				<i>时</i>
				<span><strong>57</strong></span>
				<i>分</i>
				<span><strong>23</strong></span>
				<i>秒</i>
			</div>
		</div>
		
		<div class="lq-box_5">
			<a href="###"><img src="static/img/1 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/2 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/3 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/4 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/5.jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/6.jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/7 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/8 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/9 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/10 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/11 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/12 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/13 (1).jpg" class="top_1"/></a>
			<a href="###"><img src="static/img/14 (1).jpg" class="top_1"/></a>
		</div>
		
		<div class="lq-box_6">
			<a href="###"><img src="static/img/15 (1).jpg" class="top_2"/></a>
			<a href="###" ref="one"><img src="static/img/16 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/17 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/18 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/19b.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/20 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/21 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/22 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/23 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/24b.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/25 (1).jpg" class="top_2"/></a>nn
			<a href="###"><img src="static/img/26a.jpg" class="top_2"/></a>
			<a href="###" ref="two"><img src="static/img/27 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/28 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/29b.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/30 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/31 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/32b.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/33b.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/34a.jpg" class="top_2"/></a>
			<a href="###" ref="three"><img src="static/img/35a.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/35.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/36a.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/37 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/38 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/39 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/40 (1).jpg" class="top_2"/></a>
			<a href="###" ref="four"><img src="static/img/41 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/53 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/42a.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/43b.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/44 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/45a.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/46a.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/47 (1).jpg" class="top_2"/></a>
			<a href="###" ref="five"><img src="static/img/48b.jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/69 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/49 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/57 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/58 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/59 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/60 (1).jpg" class="top_2"/></a>
			<a href="###"><img src="static/img/61 (1).jpg" class="top_2"/></a>
		</div>
		<div class="lq-box_7">
				<img src="static/img/float (1).png" class="nb_1"/>
				<a href="javascript:;" @click="aaa('one')" class="nb_2"></a>
				<a href="javascript:;" @click="aaa('two')" class="nb_3"></a>
				<a href="javascript:;" @click="aaa('three')" class="nb_4"></a>
				<a href="javascript:;" @click="aaa('four')" class="nb_5"></a>
				<a href="javascript:;" @click="aaa('five')" class="nb_6"></a>
		</div>
	 </div>
	</div>
</template>static
<script>
	import myHeader from './Header'
	import myAdbanner from './Adbanner'
	export default {
		data(){
			return{
				msg : '酒仙网8周年庆主会场'
			}
		},
		methods: {
			aaa(a){
				console.log(this.$refs)
				//console.log(this.$refs.a.offSetTop);
				document.body.scrollTop = '500px';
				document.body.scrollTop = this.$refs.one.offsetTop
			}
		},
		components:{
			myAdbanner,
			myHeader
		}
	}
</script>
<style scoped>
	img{
		display:block;
	}
	
	html{
				font-size: 10px;
			}
			.clearFix:after{
				content: "";
				display: block;
				clear: both;
				height: 0;
				overflow: hidden;
				zoom: 1;
			}
			.lq-box{
				display: flex;
				width:100%;
				height:100%;
				background:white;
			}
			.lq-box .lq-box_1{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:0.125rem 0.372rem; 
				background: #de4943;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				height: 1.2rem;
				z-index: 10;
			}
			.lq-box_1 img{
				width: .6rem
			}
			.lq-box_1 a:first-child{
				display: inline-block;
				margin-top: .2rem;
			}
			.lq-box_1 span{
				color: #fcefef;
				font-size:0.5rem;
				font-weight: bold;
			}
			.lq-box_1 a:last-child{
				margin-right:0.328rem;
			}
			.gg{
				margin-top: 1.462rem;
			}
			.we{
				position: absolute;
				color:white;
				left:.5rem;
				top:0;
				font-size: .8rem;
			}
			.lq-box_4{
				width:100%;
				text-align: center;
				background:yellow;
				font-size: 0.391rem;
				padding:0.156rem 0;
			}
			.edg span{
				color:red;
				font-size: 0.422rem;
			}
			.edg i{
				color:#FF8000;
				font-style:normal;
			}
			.lq-box_5 .top_1{
				width:100%;
				height:auto;
			}
			.lq-box_6 .top_2{
				width:100%;
				height:auto;
			}
			.lq-box_7{
				width: 100%;
			    height: auto;
			    position: fixed;
			    bottom: 0;
			    left: 0;
			    z-index: 200;
			}
			.lq-box_7 .nb_1{
				width: 100%;
			    max-width: 640px;
			    height: auto;
			    font-size: 0;
			    margin: 0 auto;
			    position: relative;
			}
			.lq-box_7 a{
				display: block;
			    position: absolute;
			    top: 0;
			    height: 100%;
			}
			.nb_2{
				width: 20%;
    			left: 0;
			}
			.nb_3{
				width: 20%;
    			left: 20%;
			}
			.nb_4{
				width: 20%;
    			left: 40%;
			}
			.nb_5{
				width: 20%;
    			left: 60%;
			}
			.nb_6{
				width: 20%;
    			left: 80%;
			}

</style>